<template>
  <div class="gs_item">
    <div class="inp"> 
      <!-- @change="changeStatus" -->
      <input type="checkbox" name="" id="" 
      :checked="status"
     
      
      />
      <i :class="status == true ? 'active':'' "
        @click="getNewStatus"
      ></i>
    </div>
    <div class="com">
      <div class="pic" @click="goProductDetail">
        <img v-lazy="image" alt="" />
      </div>
      <div class="info">
        <div class="des">{{store_name}}</div>
        <div class="type">{{suk}}</div>
        <div class="price">￥{{price}}</div>
        <div class="number">
            <slot></slot>
        </div>
      </div>
    </div>
  </div>
</template>

<script>


export default {
    data(){
      return{
        newStatus:false
      }
    },
    props:{
       productId:{
         type:[Number,String]
       },
       uniqueId:{
         type:String,
       },
       cartId:{
         type:[Number,String]
       },
       store_name:{
         type:String
       },
       image:{
         type:String
       },
       price:{
         type:String
       },
       suk:{
         type:String
       },
       count:{
         type:Number
       },
       status:{
         type:Boolean
       },
    },
    methods:{
       // 把勾选的状态发送给发父组件
       
      getNewStatus(){
        // 最新的勾选状态
        // this.newStatus = !this.newStatus
        this.$emit('newStatus-click-change',{id:this.cartId,status:!this.status})
       
        console.log("ok1")
      },

      goProductDetail(){
        this.$router.push('/detail/'+this.productId)
      }
      // changeStatus(e){
      //   console.log("ok",e)
      //   // 1.0 获取多选框的最新状态
      //   let newStatus = e.target.checked
      //   this.$emit('newStatus-input-change',{id:this.productId,status:newStatus})
      // }

    }
}
</script>
<style lang="scss" scoped>
.gs_item {
  padding: 12px 15px;
  background: #fff;
  display: flex;
  align-items: center;
  .inp {
    margin-right: 10px;
    input {
      display: none;
    }
    i{
      display: inline-block;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      border: 1px solid #ccc;
    }

    i.active{
      display: inline-block;
      
      background: url(../../assets/icon/common/cart_yes.png) no-repeat;
      background-size: 55% 55%;
      background-position: center center;;
      border-radius: 50%;
      background-color: #e93323;
    border-color: #e93323;
    }
  }
  .com {
    height: 80px;
    display: flex;
    justify-content: space-between;
    
    .pic {
      width: 80px;
      height: 80px;
      border-radius: 4px;
      overflow: hidden;
      margin-right: 13px;
      > img {
        width: 100%;
        height: 100%;
      }
    }
    .info {
      width: 222px;
      height: 80px;
      position: relative;
      .des {
        width: 100%;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        font-size: 14px;
        color: #282828;
      }
      .type {
        font-size: 12px;
        color: #868688;
        margin-top: 8px;
      }
      .price {
        font-size: 16px;
        color: #282828;
        margin-top: 13px;
      }
      .number{
          position: absolute;
          right: 0px;
          bottom: 3px;
      }
    }
  }
}
</style>